<template>
	<div class="NoticeOfViolation">
		<el-input
		    v-model="keyword"
		    placeholder="请输入姓名关键字"
		    class="input-with-select"
			style="width:40%"
		>
		    <template #append>				
		      <el-button @click="search"><el-icon><Search /></el-icon></el-button> 
		    </template>        
		</el-input>
		<el-button primary @click="echartsBar">统计图表</el-button> 
		<p></p>
		
		<el-table :data="tableData" style="width: 100%" :stripe="true"
		  		 ref="multipleTable"
		  		    @selection-change="handleSelectionChange"
		  		    :header-cell-style="{background:'#eef1f6',color:'#606266'}"
		  		 >
				<el-table-column prop="no" label="学号" sortable  align = "center" />
				<el-table-column prop="name" label="姓名" sortable  align = "center" />
				<el-table-column prop="className" label="班级" sortable  align = "center"/>
				<el-table-column prop="school" label="学院"  sortable  align = "center"/>
		  		<el-table-column prop="teacher" label="辅导员" sortable  align = "center"/>
				<el-table-column prop="off_reason" label="违纪原因" sortable  align = "center"/>	
				<el-table-column prop="detail" label="详细信息" sortable  align = "center"/>	
		 </el-table>
		  		  <el-pagination
					small
					background
					layout="prev, pager, next"
					:page-size="pageSize"
					:page-count="pageCount"
					:current-page="currentPage"
					@current-change="haddlePageChange"
				  />
				  
		<!--  统计图表 -->
		<el-dialog v-model="echartsVisible" title="统计图表" width="50%" draggable>
				<div id="myChart" style="width:700px; height:450px" ></div>
		    <span class="dialog-footer">
		      <el-button @click="echartsVisible = false" >关闭</el-button>
		     </span>
		</el-dialog> 		  
	</div>
</template>

<script setup>
import {ref,toRefs,reactive,onMounted,getCurrentInstance} from 'vue'

	let { proxy } = getCurrentInstance();
	var tableData=ref([]);
	var pageCount=ref(0)//总页数
	var pageSize=ref(9)
	var currentPage=ref(1)
	function getTableData(){
		var param = { "pagination": {"pageNo":currentPage.value,"pageSize":pageSize.value}, "conditionList":[]};
		var jsonparam = JSON.stringify(param) 
	    proxy.$http.post("/NoticeOfViolationFindAll",jsonparam)
		.then(res => {
			tableData.value=res.data.records;//把获取的服务端数据数组传递给tableData
			//总页数
			pageCount.value=Math.ceil(res.data.totalPages/pageSize.value);
		})
		.catch(err => {
			console.log(err)
		});
	}
	onMounted(()=>{
			getTableData()
			
		});
		//点击改变页码时，当前页改变，根据新的URL参数重新获取后台数据
		function haddlePageChange(currentpage){			
			currentPage.value=currentpage;
			getTableData();		
		}
		//按关键字查询
		const keyword=ref('')
		let search=()=>{
			if(keyword.value=='')
				keyword.value=null
				getTableData()
			var param = { "pagination": {"pageNo":currentPage.value,"pageSize":pageSize.value}, "conditionList":[
		    {"value":keyword.value,"key":"姓名","operator":"like"},
			]};
			var jsonparam = JSON.stringify(param) 
			proxy.$http.post("NoticeOfViolationFindAll",jsonparam)
			.then(res => {
				tableData.value=res.data.records;//把获取的服务端数据数组传递给tableData
				//总页数
				pageCount.value=Math.ceil(res.data.totalNum/pageSize.value);
				keyword.value==''
				if(res.data.totalNum ==0 && keyword.value !=null)
				alert(res.data.message)
			})
			.catch(err => {
				console.log(err)
			});
		}
		
		import * as echarts from 'echarts'
		let echartsVisible=ref(false)
		let Data = {}
		let arrLength=0;
		function echartsBar(){
			echartsVisible.value=true
			//构建图表数据
			Data={values:[],name:[]} //图表显示名称及统计数字
			var pageSize=ref(100000)
			var currentPage=ref(1)
			var param = { "pagination": {"pageNo":currentPage.value,"pageSize":pageSize.value}, "conditionList":[]};
			var jsonparam = JSON.stringify(param) 
			proxy.$http.post("/StudentFindAll",jsonparam)
			.then(res => {
				// arrLength=unique(res.data.records).length
				unique(res.data.records).forEach((item,index)=>{
					//请求宿舍楼
					proxy.$http.get('/NoticeOfViolationFindBySchool?school='+item.academy)
					 .then((response) => {
						//学院名放入数组
						Data.name.push(item.academy);
						//每个学院违纪个数存入
						Data.values.push(response.data.records.length);
							draw()					
					})							
				});
			})
		
		}
		
		function draw(){
			let myChart = echarts.init(document.getElementById("myChart"));
			var getData = [];
			 for(let i=0; i<Data.values.length; i++) {
				var obj = new Object();
				obj.name = Data.name[i];
				obj.value = Data.values[i];
				getData[i] = obj;
			}
			myChart.setOption({
				title: {
					text: "各学院违纪占比",
					bottom:"10%",
					left:"38%",
				},
				legend: {
					orient: 'vertical',
					left: 'left',
					data: Data.name
				},
				label: {
				  show: true,
				  formatter: "{b} : {c} ({d}%)" // b代表名称，c代表对应值，d代表百分比
				},
				series: [{
					
					type: "pie",
					radius: '55%',
					data:getData,
				}, ],
			});
		}
		//把集合里相同的数据去除
		function unique(arr) {
		  const res = new Map();
		  return arr.filter((arr) => !res.has(arr.academy) && res.set(arr.academy, 1));
		}
</script>

//分页居中显示
<style scoped>
  .el-pagination {
	justify-content: center;
  }
</style>